<template>
  <v-card id="personal-center-card">
    <!-- tabs -->
    <v-tabs
      v-model="tab"
      show-arrows
    >
      <v-tab
        v-for="tab in tabs"
        :key="tab.icon"
        :to="tab.route"
      >
        <v-icon
          size="20"
          class="me-3"
        >
          {{ tab.icon }}
        </v-icon>
        <span>{{ tab.title }}</span>
      </v-tab>
    </v-tabs>

    <!-- tabs item -->
    <router-view></router-view>
  </v-card>
</template>

<script>
import { mdiAccountOutline, mdiLockOpenOutline, mdiInformationOutline, mdiDomain, mdiAccountGroupOutline, mdiHeartOutline, mdiHistory, mdiChatOutline} from '@mdi/js'
import { ref } from '@vue/composition-api'

// demos
export default {
  components: {
  },
  setup() {
    const tab = ref('')

    // tabs
    const tabs = [
      {
        show: true,
        title: "关注",
        icon: mdiAccountGroupOutline,
        route: { name: "personal-follows"}
      },
      {
        show: true,
        title: "收藏",
        icon: mdiHeartOutline,
        route: { name: "personal-stars"}
      },
      {
        show: true,
        title: "领域",
        icon: mdiDomain,
        route: { name: "personal-domains"}
      },
      {
        title: '历史',
        icon: mdiHistory,
        route: { name: "personal-history"}
      },
      {
        show: JSON.parse(localStorage.getItem('userinfo')).profile.research_id != "",
        title: "私信",
        icon: mdiChatOutline,
        route: { name: "personal-chat" },
      },

    ]

    return {
      tab,
      tabs,
      icons: {
        mdiAccountOutline,
        mdiLockOpenOutline,
        mdiInformationOutline,
        mdiDomain,
        mdiAccountGroupOutline,
        mdiHeartOutline,
        mdiChatOutline,
      },
    }
  },
  mounted() {

  },
};
</script>
